<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>生产过程信息系统-首页</title>
    <link rel="stylesheet" href="../static/mint-ui/style.min.css">

    <style type="text/css">

        html {
            font-size: 100px;
            /*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */
            height: 100%;
        }

        body {
            font-size: 0.16rem; /*恢复浏览器默认字体大小设置*/
            height: 100%;
            padidng: 0;
            margin: 0;
            background-color: #F5F5F5; /*浅灰色背景*/
        }
    </style>

</head>
<body>
<div id="app" class="my-container">
    <mt-header fixed title="生产过程信息系统"></mt-header>
    <div style="height:0.4rem;"></div>
    <mt-tab-container v-model="selected">

        <mt-tab-container-item id="home-work">
            <template v-for="menu in menus">

                <mt-cell
                        :title="menu.m_name"
                        :to="'..'+menu.m_url"
                        is-link
                ></mt-cell>

            </template>

        </mt-tab-container-item>
        <%--变量都要加:--%>
        <mt-tab-container-item id="home-mine">
            修改界面
        </mt-tab-container-item>

    </mt-tab-container>


    <mt-tabbar v-model="selected">

        <mt-tab-item id="home-work">
            <img slot="icon" src="../static/images/work.png">
            工作
        </mt-tab-item>
        <mt-tab-item id="home-mine">
            <img slot="icon" src="../static/images/my.png">
            我的
        </mt-tab-item>

    </mt-tabbar>

    <mt-actionsheet
            :actions="actions"
            v-model="sheetVisible">
    </mt-actionsheet>

</div>


<script type="text/javascript" src="../static/js/vue-2.5.16.min.js"></script>
<script type="text/javascript" src="../static/js/axios.min.js"></script>
<script type="text/javascript" src="../static/mint-ui/index.js"></script>


<script type="text/javascript">

    new Vue({
        el: '#app',//容器
        data: {//数据绑定
            selected: 'home-work',
            menus: [],
            actions: [
                {
                    name: '修改密码',
                    method: function () {
                        console.log("修改密码");
                    }
                }
            ],
            sheetVisible: false

        },
        methods: {//方法


        },

        //回调函数（Vue对象挂在界面完成时）
        mounted() {
            let _this = this;
            axios
                .get('home/m_menus')
                .then(function (response) {
                    _this.menus = response.data;
                    console.log(_this.menus);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

        //侦听器
        watch: {
            //侦听selected属性，参数为已改变后的值
            selected(currSel) {
                if (currSel == 'home-mine') {
                    this.sheetVisible = true;//显示菜单
                } else {
                    this.sheetVisible = false;
                }
            },

            sheetVisible(currShow) {

                /*if (!currShow) {
                    this.selected = 'home-work';
                }*/
                if (!currShow){

                    this.selected = 'home-work';
                }


            }

        }


    });

</script>
</body>
</html>
